/**
 * ChildProps
 *
 * PS: 组件开始标签与闭合标签中的内容是不会渲染的.
 *
 * 插槽的基础使用:
 *    1. 组件内收到一个 children 的 prop 直接将该 prop 通过 大括号使用即可.
 *
 * 具名插槽:
 *    这时不能使用 children , 可以定义多个 prop 就欧克了.
 *
 * 插槽作用域:
 *    与 Vue 一样,都是找当前组件要, 而不是子组件.
 *
 * 作用域插槽:
 *    1. 传递给子组件的插槽内容不是一段ReactElement, 而是 () => ReactElement
 *    2. 子组件调用该函数,且传递参数
 *    3. ReactElemnet 就可以使用该参数
 */

import React from "react";

import Hello from "./Hello";

const name = "App";

class App extends React.Component {
  render(): React.ReactNode {
    return (
      <div>
        <h1>ChildProps</h1>
        <hr />

        <Hello
          top={<button>Top</button>}
          bottom={({ a, b }) => {
            return (
              <button>
                Bottom - {a} - {b}
              </button>
            );
          }}
        >
          <button>children - {name}</button>
        </Hello>
      </div>
    );
  }
}

export default App;

// <template>
//   <Hello>
//     <template #default="{ a }">
//       <button>{{ a }}</button>
//     </template>
//   </Hello>
// </template>
